<template>
  <!--底部-->
  <footer class="ui inverted vertical segment" style="padding-top: 2.5em !important;position: unset">
    <div class="ui container center aligned">
      <div class="ui inverted divided stackable grid">
        <div class="three wide column">
          <div class="ui inverted link list">
            <div class="item">
              <img src="https://chenyumengblog.oss-cn-hangzhou.aliyuncs.com/img/footer.gif" alt="" style="width: 100px">
            </div>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header">最新博客</h4>
          <div class="ui inverted link list">
            <a @click="gotoBlog(blog.id)" v-for="blog in blogLatestRecommend" class="item">{{blog.title}}</a>
          </div>
        </div>
        <div class="three wide column">
          <h4 class="ui inverted header">联系我</h4>
          <div class="ui inverted link list">
            <a class="item">QQ: 2390651924</a>
            <a class="item">Email: 2390651924@qq.com</a>
          </div>
        </div>
        <div class="seven wide column">
          <h4 class="ui inverted header">Chenyumeng</h4>
          <p class="my-text-spaced my-opacity-mini">热爱生活 记录所遇 分享所学</p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <!--TODO://流量 https://web.umeng.com/main.php?c=site&a=add-->
      <p class="my-text-spaced my-opacity-tiny">Copyright © 2020 Chenyumeng</p>
    </div>
  </footer>
</template>

<script>
  import {getBlogLatestRecommend} from "../../api/home";

  export default {
    name: "CommonFooter",
    data() {
      return {
        blogLatestRecommend: []
      }
    },
    created() {
      this.getBlogLatestRecommend()
    },
    methods: {
      // 最新推荐
      getBlogLatestRecommend() {
        getBlogLatestRecommend({start: 0,end:4}).then(res => {
          if (res.code === 200) {
            this.blogLatestRecommend = res.data;
          }
        })
      },
      gotoBlog(id) {
        console.log(id)
        this.$router.push({name:"Blog",params:{blogId:id}})
      }
    }
  }
</script>

<style scoped>

</style>
